<template>
  <div class="container flc" :style="{ paddingTop: `${45 + statusBarHeight}px` }">
    <NavBar 
      :navBarStyle="{
        backgroundColor: navBarBg,
        height: `${45 + statusBarHeight}px`,
        paddingTop: `${statusBarHeight}px`,
      }"
      pageName="申领管理"
      @onLeftClick="leftBack" 
    >
      <div slot="nav-right" class="fl vc end">
        <div class="img36 flvcc" @click="showSearch = !showSearch">
          <img src="@/assets/images/icon_search.png" class="img24" />
        </div>
      </div>
    </NavBar>
    <div class="fls fl vc mb10 plr_16" v-if="showSearch">
      <van-field
        v-model.trim="queryParams.storeName"
        left-icon="search"
        placeholder="输入关键字"
      />
      <p class="dx_15 color_16 fl end wb20" @click="resetSearch">搜索</p>
    </div>
    <div class="hb flc">
      <!-- <div class="fls fl vc bg_fff pad_8_20 mb10">
        <div 
          class="change_item"
          :class="queryParams.receiveStatus == item.value ? 'bg_d1 dx_14' : 'bg_f6 dx_12 color_A9'"
          @click="changeStatus(item.value)"
          v-for="item in applyStatusOptions.filter(
            (item) => item.value != 17
          )"
          :key="item.value"
        >{{ item.label }}</div>
      </div> -->
      <!-- <div class="fls">
        <van-tabs v-model="queryParams.receiveStatus" @change="changeStatus">
          <van-tab v-for="item in applyStatusOptions.filter(
            (item) => item.value != 17
          )" :key="item.value" :title="item.label" :name="item.value"></van-tab>
        </van-tabs>
      </div> -->
      <div class="fls">
        <van-tabs v-model="activeTab" @change="changeStatus">
          <van-tab v-for="item in tabList" :key="item.value" :title="item.label" :name="item.value"></van-tab>
        </van-tabs>
      </div>
      <div class="fl1 flau plr_16" ref="scrollRef">
        <div v-if="applyList.length == 0" class="bg_fff">
          <van-empty description="暂无数据~" />
        </div>
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="applyList.length > 0 ? '没有更多了' : ''"
          @load="onLoad"
        >
          <div class="mb10" v-for="(item, index) in applyList" :key="item.id" @click="openApplyDetail(item, index)">
            <ApplyItem :item="item"></ApplyItem>
          </div>
        </van-list>
      </div>
    </div>
    <!-- <div class="empty_wrap"></div> -->
    <ApplyDetail ref="ApplyDetail" @refresh="updateList"></ApplyDetail>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar/NavBar.vue'
import ApplyItem from './components/ApplyItem.vue'
import ApplyDetail from './components/ApplyDetail.vue'
import { List, Tab, Tabs, Field } from 'vant';
import { navOtherHeight, applyStatusOptions } from '@/config/config'
import { getApplyList } from '@/api/apply.js'
export default {
  components: {
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Field.name]: Field,
    NavBar,
    ApplyItem,
    ApplyDetail
  },

  data() {
    return {
      applyStatusOptions,
      navBarBg: 'transparent',
      navigationHeight: 47,
      statusBarHeight: 0,
      navOtherHeight,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        receiveStatus: null,
        storeName: ''
      },
      showSearch: false,
      activeTab: 1,
      tabList: [
        {
          value: 1,
          label: '全部'
        },
        // {
        //   value: 2,
        //   label: '申领'
        // },
        // {
        //   value: 3,
        //   label: '扫码绑本'
        // },
        {
          value: 4,
          label: '申领中'
        },
        {
          value: 5,
          label: '待发货'
        },
      ],
      loading: true,
      finished: false,
      applyList: []
    };
  },

  watch: {
    "$store.state.token": {
      handler:function() { 
        this.queryParams.receiveStatus = null
        this.getApplyList()
      }
    }
  },

  created() {
    this.getAPPNavHeight()
    if (this.$store.state.token) {
      this.queryParams.receiveStatus = null
      this.getApplyList()
    }
  },

  methods: {
    
    onLoad() {
      console.log('到底')
      this.queryParams.pageNum += 1
      this.getApplyList()
    },

    resetSearch() {
      this.queryParams.pageNum = 1
      this.$refs.scrollRef.scrollTop= 0
      this.handleParams()
      this.getApplyList()
    },

    // 切换申领状态查询
    changeStatus() {
      this.queryParams.storeName = ''
      this.resetSearch()
      // if (this.queryParams.receiveStatus != val) {
      //   this.queryParams.receiveStatus = val
      //   this.queryParams.pageNum = 1
      //   this.$refs.scrollRef.scrollTop= 0
      //   this.getApplyList()
      // }
    },

    handleParams () {
      switch (parseInt(this.activeTab)) {
        case 1: 
          this.queryParams.receiveStatus = null
          this.queryParams.receiverSourceType = null
          this.queryParams.expressStatus = null
          break
        case 2:
          this.queryParams.receiveStatus = null
          this.queryParams.expressStatus = null
          this.queryParams.receiverSourceType = 0
          break
        case 3:
          this.queryParams.receiveStatus = null
          this.queryParams.expressStatus = null
          this.queryParams.receiverSourceType = 10
          break
        case 4:
          this.queryParams.receiveStatus = 10
          this.queryParams.expressStatus = null
          this.queryParams.receiverSourceType = null
          break
        case 5:
          this.queryParams.receiveStatus = null
          this.queryParams.receiverSourceType = null
          this.queryParams.expressStatus = 22
          break
        default:
          break
      }
    },

    // 打开申领详情
    openApplyDetail(item, index) {
      this.$refs.ApplyDetail.initData(item, index)
    },

    updateList(item, index) {
      this.applyList[index] = item
    },

    leftBack () {
      console.log('点击了', window)
      if (window.androidJSBridge) {
        window.androidJSBridge.back()
      } else if (window.webkit) {
        console.log('ios')
        window.webkit.messageHandlers.back.postMessage({})
      }
    },

    getAPPNavHeight () {
      console.log('--appNavigation--', window)
      if (window.androidJSBridge) {
        const result = JSON.parse(window.androidJSBridge.appNavigation())
        this.navigationHeight = result.navigationHeight
        this.statusBarHeight = result.statusBarHeight
        document.documentElement.style.setProperty('--navHeight', this.navigationHeight + 'px')
        console.log('android1', result)
        this.getApplyList()
      } else if (window.webkit) {
        console.log('ios-appNavigation')
        window.appNavigation = this.onAppNavigation
        window.webkit.messageHandlers.appNavigation.postMessage({})
      } else {
        this.navigationHeight = 0
        document.documentElement.style.setProperty('--navHeight', this.navigationHeight + 'px')
      }
    },

    onAppNavigation (result) {
      console.log('ios--appNavigation', result)
      this.navigationHeight = Number(result.navigationHeight)
      this.statusBarHeight = Number(result.statusBarHeight)
      document.documentElement.style.setProperty('--navHeight', this.navigationHeight + 'px')
    },

    // 获取申领列表
    async getApplyList () {
      try {
        const params = {
          request: {
            dto: {
              ...this.queryParams
            }
          }
        }
        const res = await getApplyList(params)
        console.log('申领列表', res)
        if (res.errorCode === 0) {
          if (res.response.records.length) {
            this.applyList = this.queryParams.pageNum > 1 ? [...this.applyList, ...res.response.records] : res.response.records
          }
          else {
            this.applyList = this.queryParams.pageNum > 1 ? this.applyList : res.response.records
          }
          if (res.response.records.length < this.queryParams.pageSize) {
            this.finished = true
            this.loading = true
          } else {
            this.finished = false
            this.loading = false
          }
        }
      } catch (error) {
        console.error(error)
      }
    },
  }
};
</script>

<style lang="less">
html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.container {
  height: calc(100vh - var(--navHeight));
  // padding-bottom: 40px;
  .van-tabs {
    margin-bottom: 10px;
  }
  .van-tabs__nav {
    background: transparent;
  }
  .van-tab__text--ellipsis {
    color: #8C8C8C;
    font-size: 14px;
  }
  .van-tabs__line {
    background-color: #131419;
    height: 2px;
  }
  .van-tab--active .van-tab__text--ellipsis {
    color: #131419;
    font-size: 16px;
    font-weight: 600;
  }
  .van-cell {
    border-radius: 8px;
  }
}
.empty_wrap {
  width: 100%;
  height: var(--navHeight);
  background-color: #F6F6F6;
  position: fixed;
  bottom: 0;
  left: 0;
}
.pad_10_16 {
  padding: 10px 16px;
}
.pad_8_20 {
  padding: 8px 20px;
}
.pad_12 {
  padding: 12px;
}

.pdl_12 {
  padding-left: 12px;
}
.apply_wrap {
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(209, 251, 113, 0.32) 0%, rgba(209, 251, 113, 0.00) 100%);
  font-size: 15px;
  padding: 4px 8px;
}
.w23 {
  width: 23px;
}

</style>
